<!-- 对 button 组件的编辑 -->
<template>
  <div class="image-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="7">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="封面图片" style="margin-bottom:0px;">
                    <div class="img-box-u">
                      <el-image @click.stop="changeImageRepertory" style="height:100px;max-width:100%;cursor:pointer;    background-color: #eee; position:relative;"
                        :src="imageSrc" :fit="'contain'">
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                      <div class="delete-u" v-if="data.config.img.src"><i @click.stop="deleteImage"
                          class="el-icon-delete"></i></div>
                    </div>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="7">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="移入图片" style="margin-bottom:0px;">
                    <div class="img-box-u">
                      <el-image @click.stop="changeHoverImageRepertory" style="height:100px;max-width:100%;cursor:pointer;    background-color: #eee;"
                        :src="hoverimageSrc" :fit="'contain'">
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                      <div class="delete-u" v-if="data.config.hoverImg.src"><i @click.stop="deleteHoverImage"
                              class="el-icon-delete"></i></div>
                    </div>
                    <el-tooltip class="note" effect="dark" content="建议上传高度较小于封面图以达较优展示效果" placement="right">
                      <i class="el-icon-question color-gray"></i>
                    </el-tooltip>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="10">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="alt 属性" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.config.img.alt" maxlength="32" placeholder="图片alt属性">
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="title 属性" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.config.img.title" maxlength="32" placeholder="图片title属性">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <LinkSimple title="图片链接" :defValue="data.config.link" ref="linkSimple" :chgValue="changeLink" />
            <el-form :label-width="formLabelWidth">
                <el-form-item label="阴影显示" style="margin-bottom:0px;">
                  <el-radio-group size="mini" v-model="data.config.shadow">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
             <el-row>
              <el-col :span="12">
                 <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="标题" style="margin-bottom:0px;">
                      <el-input size="mini" v-model="data.config.title.text" maxlength="200" placeholder="" style="width:193px;"></el-input>
                    </el-form-item>
                  </el-form>
                  <Color :defValue="data.config.title.color" :chgValue="(d)=>{data.config.title.color = d}" />
                  <FontFamily :defValue="data.config.title.fontFamily" :chgValue="(d)=>{data.config.title.fontFamily = d}" />
                  <FontSize :defValue="data.config.title.fontSize" :chgValue="(d)=>{data.config.title.fontSize = d}" />
                  <FontWeight :defValue="data.config.title.fontWeight" :chgValue="(d)=>{data.config.title.fontWeight = d}" />
                  <FontStyle :defValue="data.config.title.fontStyle" :chgValue="(d)=>{data.config.title.fontStyle = d}" />
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="文字说明" style="margin-bottom:0px;">
                      <el-input size="mini" type="textarea" :rows="4" v-model="data.config.caption.text" maxlength="500" placeholder="" style="width:100%;"></el-input>
                    </el-form-item>
                  </el-form>
                  <Color :defValue="data.config.caption.color" :chgValue="(d)=>{data.config.caption.color = d}" />
                  <FontFamily :defValue="data.config.caption.fontFamily" :chgValue="(d)=>{data.config.caption.fontFamily = d}" />
                  <FontSize :defValue="data.config.caption.fontSize" :chgValue="(d)=>{data.config.caption.fontSize = d}" />
                  <FontWeight :defValue="data.config.caption.fontWeight" :chgValue="(d)=>{data.config.caption.fontWeight = d}" />
                  <FontStyle :defValue="data.config.caption.fontStyle" :chgValue="(d)=>{data.config.caption.fontStyle = d}" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import LinkSimple from '@/components/common/design/dialog/component/formitem/LinkSimple.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    imageSrc () {
      return this.data.config.img.src ? this.data.config.img.src : this.data.config.img.emptySrc
    },
    hoverimageSrc () {
      return this.data.config.hoverImg.src ? this.data.config.hoverImg.src : this.data.config.img.emptySrc
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTSCENEFLIP, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      this.activeName = '1'
      this.iframeLoading = true
      this.init = true

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      iframeStyle: {},
      formLabelWidth: '120px',
      name: '图文翻转',
      bjComponent: null,
      data: null,
      init: true
    }
  },
  methods: {
    getComponentName () {
      var compname = this.iframeStyle.compname
      var temp = this.titleCase(compname.replace('_', ' ')).replace(' ', '')
      return temp.replace(temp[0], temp[0].toLowerCase())
    },
    titleCase (str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    },
    borRadiusblur () {
      if (isNaN(parseInt(this.data.config.borderRadius))) {
        this.data.config.borderRadius = 0
      } else {
        this.data.config.borderRadius = parseInt(this.data.config.borderRadius)
      }
    },
    changeLink (link) {
      this.data.config.link = link
      // if (link.href && parseInt(this.data.config.linghtBox) === 1) {
      //   this.data.config.linghtBox = 0
      // }
    },
    lingthBoxChange () {
      // if (parseInt(this.data.config.linghtBox) === 1) {
      //   this.data.config.link.href = ''
      //   this.$refs['linkSimple'].setLink(this.data.config.link)
      // }
    },
    changeImageRepertory () {
      this.$refs['chooseImage'].show({ title: '选择图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.forEach(item => {
            this.data.config.img.src = functions.getRepertoryImageSrcByHostRepertory(item)
            this.bjComponent._other.img.hrepertory = _.cloneDeep(item)
          })
        }
      })
    },
    changeHoverImageRepertory () {
      this.$refs['chooseImage'].show({ title: '选择图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.forEach(item => {
            this.data.config.hoverImg.src = functions.getRepertoryImageSrcByHostRepertory(item)
            this.bjComponent._other.hoverImg.hrepertory = _.cloneDeep(item)
          })
        }
      })
    },
    // 删除 封面图片
    deleteImage () {
      this.bjComponent._other.img.hrepertory = null
      this.data.config.img.src = ''
    },
    // 删除 移入图片
    deleteHoverImage () {
      this.bjComponent._other.hoverImg.hrepertory = null
      this.data.config.hoverImg.src = ''
    },
    // ......
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    LinkSimple,
    ChooseRepertory,
    Color,
    FontFamily,
    FontSize,
    FontWeight,
    FontStyle
  }
}

</script>
<style scoped lang="scss">
.image-edit .image-slot {
  color: #656565;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-container-u {
  width: 840px;
  min-height:calc(100vh - 200px);
}
.theme-uu /deep/ .el-input__suffix {
  display:none;
}
.img-box-u{
  display: inline-block;
  position: relative;
  .delete-u {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background: #409eff;
    color: #fff;
    text-align: right;
    font-size: 16px;
    padding: 0 6px;
    cursor: pointer;
    line-height: 1.8;
    opacity: 0;
  }
  &:hover .delete-u {
    opacity: 1;
  }
}
.note{
  position: absolute;
  left: -47px;
  top: 32px;
  color: #aaa;
}
</style>
